<template>
	<view>
		<view class="flex align-center text-center" style="height: 100rpx;">
			<view @click="changeTab(index)" class="flex-1" v-for="(item,index) in tabBars" :key="index">
				<view 
				:class="index===tabIndex ? 'font-lg font-weight-bold text-main':'font-md'">
				{{item.name}} <text v-if="item.num>0" class="ml-2 font-sm">{{item.num}}</text></view>
			</view>
			<!-- 列表 -->
		</view>
		<swiper :duration="150"
		:current="tabIndex" 
		@change="onChangeTab" 
		:style="'height:'+scrollH+'px;'">
			<swiper-item 
			v-for="(item,index) in userList" 
			:key="index">
				<scroll-view 
				scroll-y="true" 
				:style="'height:'+scrollH+'px;'" 
				@scrolltolower="loadmore(index)">
					<!-- 列表样式 -->
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<user-list :item="item2" :index="index2"></user-list>
						</block>
						<!-- 上拉加载 -->
						<load-more v-if="item.list.length>10" :loadmore="item.loadmore"></load-more>
					</template>
					<template v-else>
						<no-thing></no-thing>
					</template>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import loadMore from '@/components/common/load-more';
	import NoThing from '@/components/common/no-thing';
	import userList from '@/components/user-list/user-list.vue'
	import {getFollow} from "@/network/follow.js";
	
	export default {
		components:{
			loadMore,
			NoThing,
			userList
		},
		data() {
			return {
				
				// 数据
				userList:[],
				tabIndex:0,
				// 列表高度
				scrollH:600,
				tabBars:[{
					name:"互关",
					num:0
					
				},{
					name:"关注",
					num:0
				},{
					name:"粉丝",
					num:0
				}],
			}
		},
		onLoad() {
			getFollow().then(attr=>{
				let [err,res] = attr
				this.tabBars = res.data[0].tabBars
				
				this.userList = res.data[1].data_list
			})
			uni.getSystemInfo({
				success:res=>{
					// 单位：px
					this.scrollH = (res.windowHeight - uni.upx2px(100))
				}
			})
			
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search?type=user'
			})
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta:1
			})
		},
		methods: {
			changeTab(index){
				this.tabIndex = index
			},
			// 监听滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index){
				if(this.tabIndex === index){
					return
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab' + index
					
			},
			// 上拉加载更多
			loadmore(index){
				let item = this.newsList[index]
				if(item.loadmore !=="上拉加载更多") return
				// 修改列表状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					item.list = [...item.list,...item.list]
					item.loadmore = '上拉加载更多'
				},2000)
			}
		}
	}
</script>

<style>

</style>
